<template>
    <div id="chat-sidebar">
        <!-- 聊天列表 -->
      <el-tooltip class="item" effect="dark" content="聊天" placement="right">
        <div id="conversation-list"
             class="chat-sidebar-item"
             @click="handleClick('conversation-list')"
             :class="{'active':showConversationList}">
          <!-- 未读消息条数 -->
          <div v-if="unreadChatMessage"
               class="unread">{{unreadChatMessage}}
          </div>
          <i class="el-icon-chat-dot-round"></i>
        </div>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="通讯录" placement="right">
        <!-- 朋友列表 -->
        <div id="friend-list"
             @click="handleClick('friend-list')"
             class="chat-sidebar-item"
             :class="{'active':showFriendList}">
          <!-- 未处理请求消息条数 -->
          <div v-if="untreatedRequestMessage"
               class="unread">{{untreatedRequestMessage}}
          </div>
          <i class="el-icon-notebook-2"></i>
        </div>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="个人中心" placement="right">
        <!-- 个人中心 -->
        <div id="personal-center"
             @click="handleClick('personal-center')"
             class="chat-sidebar-item"
             :class="{'active':showPersonalCenter}">
          <i class="el-icon-user-solid"></i>
        </div>
      </el-tooltip>
    </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import tim from "@/tim";
  const activeName = {
    // 会话列表
    CONVERSATION_LIST:'conversation-list',
    // 好友列表
    FRIEND_LIST:'friend-list',
    //个人中心
    PERSONAL_CENTER:'personal-center'
  }
    export default {
        name: "Sidebar",
      data(){
          return{
          }
      },
      computed:{
          ...mapGetters([
            'sidebarActive','conversationList','requestMessageList'
          ]),
          showConversationList(){
            return this.sidebarActive === activeName.CONVERSATION_LIST
          },
         showFriendList(){
            return this.sidebarActive === activeName.FRIEND_LIST
         },
        showPersonalCenter(){
            return this.sidebarActive === activeName.PERSONAL_CENTER
        },
        // 聊天消息未读总条数
        unreadChatMessage(){
          let unread=0
          this.conversationList.forEach(item=>{
            unread += item.unreadCount
          })
          if(unread>99){
            return 99+"+"
          }
          return unread
        },
        // 未处理请求添加好友消息条数
        untreatedRequestMessage() {
          let untreated = this.requestMessageList.length
          if(untreated>99){
            return 99+'+'
          }
          return untreated
        }
      },
      methods:{
        handleClick(id){
          this.$store.commit('chat/SET_SIDEBAR_ACTIVE',id)
        }
      }
    }
</script>

<style lang="scss" scoped>
  #chat-sidebar {
    width: 60px;
    height: 100%;
    background-color: #404953;
      .chat-sidebar-item {
        position: relative;
        cursor:pointer;
        height: 65px;
        text-align: center;
        color: #808080;
        font-size: 35px;
        z-index: 10;
        i {
          margin-top: 15px;
        }
        .unread{
          position: absolute;
          right: 5px;
          top: 8px;
          width: 18px;
          height: 18px;
          color: #ffffff;
          font-size: 12px;
          text-align: center;
          line-height: 18px;
          border-radius: 50%;
          background-color: red;
        }
      }
    .active{
      color: #f8cb4a;
    }
  }
</style>
